<template>
    <div class="big">
        <!-- <h1>我的关注页</h1> -->
        <div class="box">
            <van-nav-bar left-text="返回" left-arrow @click-left="$router.back()" />
        </div>
        <div class="content">
            <h1>我的关注</h1>
            <div class="title">
                <span><van-icon name="clock-o" /> 时间</span>
                <span>13:00-17:30 开放</span>
            </div>
            <div class="title">
                <span><van-icon name="location-o" /> 位置</span>
                <span @click="$router.push('/map')">美食区 11F > </span>
            </div>
            <div class="aside">
                <h3>景点介绍</h3>
                <p>
                    长城（the Great
                    Wall），又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。
                </p>
                <br>
                <p>
                    长城修筑的历史可上溯到西周时期，发生在首都镐京（今陕西西安）的著名典故“烽火戏诸侯”就源于此
                    [1-6]。春秋战国时期，列国争霸，互相防守，长城修筑进入第一个高潮，但此时修筑的长度都比较短。秦灭六国统一天下后，秦始皇连接和修缮战国长城，始有万里长城之称 [6]
                    。明朝是最后一个大修长城的朝代，人们所看到的长城多是此时修筑。
                </p>
                <br>

                <br>
                <p>
                    长城资源主要分布在河北、北京、天津、山西、陕西、甘肃、内蒙古、黑龙江、吉林、辽宁、山东、河南、青海、宁夏、新疆共15个省、自治区、直辖市。其中河北省境内长度2000多千米，陕西省境内长度1838千米
                    [8-16]。根据文物和测绘部门的全国性长城资源调查结果，明长城总长度为8851.8千米，秦汉及早期长城超过1万千米，总长超过2.1万千米 [17]
                    。现存长城文物本体包括长城墙体、壕堑、界壕、单体建筑、关堡、相关设施等各类遗存，总计4.3万余处（座/段）
                </p>
            </div>
        </div>
        <div class="btnBox">
            <van-button round type="warning" size="large" @click="care"> ❤️ 点击购票</van-button>
        </div>
    </div>
</template>
  
<script setup>
import { showSuccessToast, showFailToast } from 'vant';


let care = () => {
    showSuccessToast('购票成功');
    console.log(111);
}
</script>
  
<style lang="scss" scoped>
.big {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: auto;

    .box {
        width: 375px;
        height: 281px;
        background: url('https://img0.baidu.com/it/u=95098952,525561024&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313') 100%/cover;

        .van-nav-bar {
            background: transparent;
            color: white;
        }
    }

    .content {
        flex: 1;
        overflow: auto;
        padding: 0 10px;

        //   border-top-right-radius:25px;
        //   border-top-left-radius: 25px;
        // border: 1px solid black;
        h1 {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .title {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        h3 {
            height: 40px;
            line-height: 40px;
        }

        p {
            text-indent: 24px;
        }
    }

    .btnBox {
        height: 50px;
        width: 375px;
        padding: 5px 10px;

        .van-button {
            width: 90%;
        }
    }
}
</style>